<script setup lang="ts">
import { px2vmin } from '@/utils'
import { __TITLE_KEY__, __PIC_KEY__ } from '@/utils/constant'
const router = useRouter()
const route = useRoute()
const emits = defineEmits<{
  (event: 'update:show-music-list-com', visible: boolean): void
}>()
interface IProps {
  title: string
  pic: string
  backgroundWallStyle: { zIndex: number; height: number | string; transform: string }
  filterStyle: {
    backdropFilter: string
  }
  showMusicListCom?: boolean
}

const props = withDefaults(defineProps<IProps>(), {
  title: '',
  pic: '',
  showMusicListCom: undefined
})
const heightValue = computed<string>(() => {
  if (
    typeof props.backgroundWallStyle.height === 'string' &&
    props.backgroundWallStyle.height.endsWith('px')
  ) {
    return props.backgroundWallStyle.height
  } else {
    return props.backgroundWallStyle.height + 'px'
  }
})
const titleRef = ref<HTMLHeadElement | null>(null)
const titleContentRef = ref<HTMLSpanElement | null>(null)
const isExceed = ref<boolean>(false)
const cacheData = computed<{ title: string; pic: string }>(() => {
  const title = sessionStorage.getItem(__TITLE_KEY__) || props.title
  const pic = sessionStorage.getItem(__PIC_KEY__) || props.pic
  return {
    title,
    pic
  }
})
onMounted(() => {
  let titleWidth = (titleRef.value?.clientWidth || 0) - 40
  let titleContentWidth = titleContentRef.value?.clientWidth || 0
  if (titleContentWidth > titleWidth) {
    isExceed.value = true
  }
})
// 缓存标题和照片地址,解决刷新页面值丢失问题
onMounted(() => {
  const data = cacheData.value
  if (!data.pic || !data.title) {
    if (typeof props.showMusicListCom === 'undefined') {
      router.push({
        path: route.matched[0].path
      })
    } else {
      emits('update:show-music-list-com', false)
    }
  }
  props.pic && sessionStorage.setItem(__PIC_KEY__, props.pic)
  props.title && sessionStorage.setItem(__TITLE_KEY__, props.title)
})
// 点击返回,移除之前缓存的数据
function back() {
  sessionStorage.removeItem(__PIC_KEY__)
  sessionStorage.removeItem(__TITLE_KEY__)
  if (typeof props.showMusicListCom === 'undefined') {
    router.back()
  } else {
    emits('update:show-music-list-com', false)
    ;(document.querySelector('#play-music-list-wrapper')! as HTMLElement).style.zIndex = '155'
  }
}
</script>

<template>
  <div class="background-wall">
    <div class="top">
      <span class="icon" @click="back">
        <i class="iconfont icon-back" />
      </span>
      <header ref="titleRef" class="title">
        <template v-if="isExceed">
          <vue3-marquee>
            <span ref="titleContentRef">{{ cacheData.title }}</span>
          </vue3-marquee>
        </template>
        <template v-else>
          <span ref="titleContentRef">{{ cacheData.title }}</span>
        </template>
      </header>
    </div>
    <div
      class="image"
      :style="[
        { backgroundImage: `url(${cacheData.pic})` },
        {
          zIndex: props.backgroundWallStyle.zIndex,
          height: px2vmin(parseFloat(heightValue)),
          transform: props.backgroundWallStyle.transform
        }
      ]"
    >
      <div class="filter" :style="[filterStyle]"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.background-wall {
  position: relative;
  display: flex;

  .top {
    display: flex;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 20;
    transform: translateZ(20px);
    .icon {
      width: 40px;
      text-align: center;
      height: 30px;
      line-height: 30px;
      font-size: $font-size-large;
      color: $color-theme;
    }
    .title {
      box-sizing: border-box;
      padding-right: 40px;
      flex: 1;
      font-size: $font-size-large;
      text-align: center;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
      white-space: nowrap;
      span {
        display: inline-block;
      }
    }
  }

  .image {
    position: relative;
    transform-origin: top;
    background-size: cover;
    width: 100%;
    height: 262px;
    .filter {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(7, 17, 27, 0.4);
    }
  }
}
</style>
